import { Node } from "butterfly-dag";
import "./node.scss";
// import "../sty/style.scss";
import "@uiw/icons/fonts/w-icon.css";
class BaseNode extends Node {
  public options: Object;
  public info: Object;

  constructor(opts: {
    id: Number;
    left: Number | string;
    top: Number | string;
    color: String;
    label: String;
    title: String;
    icon: String;
    Class: BaseNode;
  }) {
    super(opts);
    this.options = opts;
    this.info = {
      id: opts.id || Math.random(),
      left: opts.left || 0,
      top: opts.top || 0,
      color: opts.color || "#5b6a92",
      title: opts.title || "节点标题",
      label: opts.label || "节点label",
      icon: opts.icon || "w-icon-home",
      Class: opts.Class || BaseNode,
    };
  }
  mounted() {}
  draw = (opts: {
    options: {
      label:
        | string
        | number
        | ((this: HTMLElement, index: number, text: string) => string | number);
    };
  }) => {
    let container = $(`<div class="init-node def">
          <div class='node-title'>
            <i class=${this.info.icon}></i>${this.info.title}</div></div>`)
      .css("top", this.info.top + "px")
      .css("left", this.info.left + "px")
      .css("background-color", this.info.color)
      .attr("id", this.info.id);

    let header = $(`<div class='init-node-head def-head'></div>`);
    let header_left = $(
      `<div class='init-node-head-left def-head-left'></div>`
    );
    let header_right = $(
      `<div class='init-node-head-right def-head-right'></div>`
    );

    container.append(header);
    header.append(header_left);
    header.append(header_right);

    header_left.text(this.info.label);
    header_right.text(">");
    // container.on("dblclick", (e) => {
    //   this.emit("dblclickNode", {
    //     node: this,
    //   });
    // });
    return container[0];
  };
}

export default BaseNode;
